<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display:flex">
        <div v-loading="treeLoading" class="tree">
          <el-tree ref="tree" :data="treeData" default-expand-all :expand-on-click-node="false">
            <span slot-scope="{ node,data }" class="custom-tree-node tree-line">
              <span v-if="data.children">
                <i :class="data.icon"></i>
                <span>{{ node.label }}</span>
              </span>
              <el-radio-group v-else v-model="activetree">
                <el-radio :label="data.value">
                  <span>{{ node.label }}</span>
                </el-radio>
              </el-radio-group>
            </span>
          </el-tree>
        </div>
        <div>
          <div class="card">
            <div v-if="ButtonList.findIndex(res=>(res.buttonValue=='XIUGAI'))!==-1" class="card_nav">
              <el-button size="small" class="bottom_all" style="margin-left: 0;" @click="pagesaddFromDate('设置默认')">
                <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
                默认工艺流程
              </el-button>
            </div>
            <div v-loading="tableLoading" class="card_info" :style="style">
              <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
                <template v-for="(item, index2) in table">
                  <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                    <template slot-scope="scope">
                      <span v-if="item.label == '操作'">
                        <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='XIUGAI'))!==-1" class="bottom_one" size="mini" @click="updateData('更新')">更新</el-button>
                      </span>
                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="addDialog" width="680px" :close-on-click-modal="false" :before-close="resetFromDate">
      <span slot="title" class="dialog-title">{{ addDialogTitle }}</span>
      <div class="dialoginfo" style="padding:0">
        <div class="dialoginfo-title">
          <template v-for="(item,index) in navlist">
            <div :key="index" :class="activenav == item.code ? 'active' : 'none'" @click="changenav(item)">
              <div>{{item.name}}</div>
            </div>
          </template>
        </div>
        <div class="dialoginfo-info">
          <div class="a">管控业务点：</div>
          <div class="b">
            <el-checkbox-group v-model="buspointids">
              <template v-for="(item,index) in buspointarr">
                <div :key="index" class="checkbox-bg">
                  <el-checkbox :label="item.id">{{item.itemName}}</el-checkbox>
                </div>
              </template>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetFromDate">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="pagessubmitFromDate()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { getPointData, saveOrUpdate, queryProcesses, updatePointData } from "@/api/basicConfig/proflow.js";
import { getDicType } from "@/api/common.js";
import { getUserAutList } from "@/api/common.js";
export default {
  mixins: [mixin],
  data() {
    return {
      activetree: '',
      /*表格数据*/
      table: [
        { label: "管控业务点", width: "auto", prop: "name", status: true },
        { label: "操作", width: "120", prop: "", status: true },
      ],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 1,
      treeData: [],
      fromDate: {
        code: "",
      },
      navlist: [
        { code: "market", name: "市场拓展" },
        { code: "nomarket", name: "非市场拓展" },
        { code: "collaboration", name: "往来协作" },
        { code: "personaluse", name: "自用" },
      ],
      tableData: [],
      activenav: "market",
      buspointarr: [],
      buspointids: [],
      buspointtotal: [],
      isAll: false,
    };
  },
  async created() {
    this.treeData = await getUserAutList()
    this.activetree = this.treeData ?.[0] ?.children[0].value;
    this.tableParam.station = this.treeData ?.[0] ?.children[0].label;
    this.treeLoading = false;

    getDicType({ code: "market" }).then((res) => {
      const newData = res.data.items.map(item => ({ ...item, type: 1 }));
      this.buspointtotal = this.buspointtotal.concat(newData);
    });
    getDicType({ code: "nomarket" }).then((res) => {
      const newData = res.data.items.map(item => ({ ...item, type: 2 }));
      this.buspointtotal = this.buspointtotal.concat(newData);
    });
    getDicType({ code: "collaboration" }).then((res) => {
      const newData = res.data.items.map(item => ({ ...item, type: 3 }));
      this.buspointtotal = this.buspointtotal.concat(newData);
    });
    getDicType({ code: "personaluse" }).then((res) => {
      const newData = res.data.items.map(item => ({ ...item, type: 4 }));
      this.buspointtotal = this.buspointtotal.concat(newData);
    });
    this.getlist();
  },
  watch: {
    activenav: {
      handler() {
        let _this = this;
        getDicType({ code: _this.activenav }).then((res) => {
          this.buspointarr = res.data.items;
        });
      },
      deep: true,
      immediate: true,
    },
    activetree: {
      handler() {
        this.getPointDetails();
      },
      deep: false,
      immediate: true,
    },
  },
  methods: {
    getlist() {
      this.tableLoading = true;
      getPointData().then((res) => {
        if (res.code === 1001) {
          if (res.data) {
            const newData = JSON.parse(res.data.servicePoint).map(item => item.id);
            this.buspointids = newData;
          }
          this.tableLoading = false;
        }
      });
    },
    /**流程切换*/
    changenav(e) {
      this.activenav = e.code;
    },
    pagesaddFromDate(text) {
      this.addDialog = true;
      this.addDialogTitle = text;
      this.isAll = true;
    },
    updateData(text) {
      this.addDialog = true;
      this.addDialogTitle = text;
      this.isAll = false;
    },
    /**
     * @Description: 如果isall为true则 设置默认，否则为设置站点
     * @Param: 
     * @Author: wangwangwang
     */
    pagessubmitFromDate() {
      let baseUri = updatePointData;
      let data = this.buspointtotal.filter((res) =>
        this.buspointids.some((item) => item == res.id)
      );
      const newData = data.map((item) => ({ id: item.id, name: item.itemName, type: item.type }))
      if (this.isAll) {
        baseUri = saveOrUpdate
      }
      let params = {
        servicePoint: JSON.stringify(newData),
        stationId: this.activetree,
      }
      baseUri(params).then(res => {
        if (res.code === 1001) {
          this.$message.success('保存成功');
          this.addDialog = false;
          this.getPointDetails()
        }
      })
    },
    getPointDetails() {
      if (!this.activetree) return
      queryProcesses({ stationId: this.activetree }).then(res => {
        if (res.code === 1001) {
          this.tableData = res.data.servicePoint ? JSON.parse(res.data.servicePoint) : [];
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.dialoginfo-info {
  padding: 20px;
  display: flex;
  .a {
    width: 100px;
    flex: none;
  }
  .b {
    flex: 1;
    .checkbox-bg {
      margin: 0 10px 10px 10px;
      display: inline-block;
    }
  }
}
.dialoginfo-title {
  > div {
    cursor: pointer;
  }
  height: 48px;
  display: flex;
  background: linear-gradient(
    180deg,
    rgba(250, 252, 255, 1) 0%,
    rgba(245, 247, 250, 1) 100%
  );
  .none {
    font-weight: bold;
    height: 48px;
    @include discen;
    width: calc(calc(100% - 1px) / 2);
    border: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 0;
    border-bottom: 1px solid #e1e5ed;
    > div {
      line-height: 48px;
      border-bottom: 1px rgba(0, 0, 0, 0) solid;
    }
  }
  .active {
    background: #fff;
    font-weight: bold;
    height: 48px;
    @include discen;
    width: calc(calc(100% - 1px) / 2);
    border: 1px solid #e1e5ed;
    border-bottom: 0;
    > div {
      color: $bg_color;
      line-height: 48px;
      border-bottom: 1px $bg_color solid;
    }
  }
}
.el-input,
.el-select {
  width: 240px;
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
